"use strict"
let socket;
let curCode = '';
let phone;
let shakeFlag = false; //默认当前设备不支持摇一摇

window.onload = function() {

	//vConsole
	window.vConsole = new window.VConsole({

		defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
		maxLogNumber: 1000,
		// disableLogScrolling: true,
		onReady: function() {
			console.log('vConsole is ready.');
		},
		onClearLog: function() {
			console.log('on clearLog');
		}
	});

	let resetBtnEl = document.getElementById('resetBtn');

	let infoBoxEl = document.getElementById('infoBox');
	let phoneInputEl = document.getElementById('phoneInput');
	let phoneBtnEl = document.getElementById('phoneBtn');
	let startBoxEl = document.getElementById('startBox');
	let stopBoxEl = document.getElementById('stopBox');
	let noShakeEl = document.getElementById('noShake');
	let timeDownEl = document.getElementById('timeDown');
	let countEl = document.getElementById('count');
	let speedEl = document.getElementById('speed');
	let prevCountEl = document.getElementById('prevCount');

	let myNumEls = [].slice.call(document.getElementsByClassName('myNum'), 0);
	let myPhoneEls = [].slice.call(document.getElementsByClassName('myPhone'), 0);

	//初始化摇一摇参数
	let count = 0; // 记录摇动次数
	let oldCount = 0; // 一秒之前摇动总次数
	let speed = 0; // 记录总摇动速度
	let prevCount = 0; // 记录上一秒摇动次数
	let time = 60; // 记录开始秒数，算摇动速度
	let totalTime = 60; // 记录总摇动时长
	let Timer = null; // 定时器对应唯一ID

	//实例化 Shake 
	let myShakeEvent = new Shake();

	shakeFlag = myShakeEvent.hasDeviceMotion; //当前设备是否支持摇一摇
	console.log('shakeFlag',shakeFlag)
	if (isPC()) {

		changeElStatus(1);
		return;

	}

	if (!shakeFlag) { //如果当前设备不支持摇一摇功能，将不支持样式显示出来，其他的都隐藏掉

		changeElStatus(1);

		return;

	}
	let separateFlag = checkSeparateStatus();
	/**
	 * 验证页面刚加载进来的状态，是之前进来过刷新了页面还是什么
	 */
	function checkSeparateStatus() {

		curCode = getItem('curCode');
		phone = getItem('phone');

		if (curCode)
			return true;
		else
			return false;
	}

	if (!separateFlag) { //如果用户没有代号

		//先让每个人输入下自己抽奖用的手机号，不进行判断，只验证是否是正确的手机号，不验证是谁的，是不是本人的，写错了也没啥关系，现场颁奖又不是记录待后期颁奖
		changeElStatus(2);

		//设备支持摇一摇，绑定按钮，用以保存用户提交的手机号
		phoneInputEl.addEventListener('blur', checkPhone, false);

		phoneBtnEl.addEventListener('click', savePhone, false);

	} else { //如果用户有代号

		connectIo();

	}

	function setStopInfo() {

		myNumEls.map(el => {

			el.innerHTML = curCode;

		})
		myPhoneEls.map(el => {

			el.innerHTML = phone;

		})

	}
	/**
	 * 验证输入的是否是手机号
	 */
	function checkPhone() {

		phone = phoneInputEl.value;

		if (!isMobile(phone)) {

			phoneInputEl.value = '';
			phoneInputEl.placeholder = '请输入正确的手机号';
			hasClass(phoneInputEl, 'warning') || addClass(phoneInputEl, 'warning');

			return false;

		}

		return true;
	}

	/**
	 * 保存用户输入的手机号
	 */
	function savePhone() {

		let phoneFlag = checkPhone();

		if (phoneFlag) {

			setItem('phone', phone);

			connectIo();

		}
	}

	//重置输入信息
	resetBtnEl.addEventListener('click', () => {
		clearAll();
		window.location.reload();
	}, false)

	/**
	 * 用户输入完手机号调用的函数，连接 socket，开启摇一摇以待调用
	 */
	function connectIo() {

		// start listening to device motion
		myShakeEvent.start();

		let host = window.location.origin;

		socket = io.connect(host + '/separate', {
			query: {
				phone,
				curCode
			}
		})

		socket.on('connect', function() {

			//链接成功，将后台生成对应的名字编号给返回一下
			socket.on('setCurCode', function(data) {

				curCode = data.curCode;

				setItem('curCode', curCode);

				setStopInfo();

				changeElStatus(4);

			})

			//收到开始摇一摇事件，绑定摇一摇，并开始倒计时
			socket.on('start', function(data) {

				shock(1000);

				/* 将等待画面隐藏，显示正在游戏画面，也就是当前用户摇动数据 */
				changeElStatus(3);

				startShake(data);

			})

			socket.on('controlsReset', function() {

				window.location.reload();

			})

		})
	}

	/**
	 * 开始摇一摇，后台将 controls 控制的时长传递过来
	 * @param {time} data 
	 */
	function startShake(data) {

		initParams(data);

		// register a shake event
		window.addEventListener('shake', shakeEventDidOccur, false);

		Timer = setInterval(function() {

			time -= 1;

			if (time <= 0) {

				removeShake();

			}

			timeDownEl.innerHTML = time; //剩余时长

			prevCount = count - oldCount; //计算上一秒次数

			prevCountEl.innerHTML = prevCount; //展示上一秒次数

			oldCount = count; //记录上一秒总次数

		}, 1000);
	}

	/**
	 * 摇一摇结束，移除摇一摇事件，不让用户继续摇，摇个没完没了了是吧
	 */
	function removeShake() {

		time = 0; //防止延迟数字成负数

		window.removeEventListener('shake', shakeEventDidOccur, false); //移除 shake 事件

		clearInterval(Timer); //清除定时器

		Timer = null;

		let tmpData = {
			curCode,
			count,
			speed
		}

		socket.emit('end', tmpData);

	}

	/**
	 * 摇一摇回调函数，每次摇动都回调
	 */
	function shakeEventDidOccur() {

		console.log("摇动手机", count);

		count += 1; //记录摇晃次数 +1

		countEl.innerHTML = count; //记录当前总次数

		speed = Math.ceil(count / (totalTime - time)); //总速度 次/秒

		speedEl.innerHTML = speed; //展示总速度 次/秒

		let tmpData = {
			curCode,
			count,
			speed
		}

		socket.emit('shake', tmpData);

	}

	/**
	 * 初始化参数
	 * @param {*} data 
	 */
	function initParams(data) {
		//初始化摇一摇参数
		count = 0; // 记录摇动次数
		speed = 0; // 记录总摇动速度
		prevCount = 0; // 记录上一秒摇动次数
		time = data.time; // 记录开始秒数，算摇动速度
		totalTime = data.time; // 总时长
		Timer = null; // 定时器对应唯一ID
	}

	/**
	 * 更改当前页面元素显示状态
	 * @param {number} status 
	 */
	function changeElStatus(status) {

		switch (status) {

			case 1: //设备不支持摇一摇
				hasClass(infoBoxEl, 'show') && removeClass(infoBoxEl, 'show');
				addClass(infoBoxEl, 'hide');
				hasClass(startBoxEl, 'show') && removeClass(startBoxEl, 'show');
				addClass(startBoxEl, 'hide');
				hasClass(stopBoxEl, 'show') && removeClass(stopBoxEl, 'show');
				addClass(stopBoxEl, 'hide');
				hasClass(noShakeEl, 'hide') && removeClass(noShakeEl, 'hide');
				addClass(noShakeEl, 'show');
				break;
			case 2: //设备支持摇一摇，刚进来初始化状态
				hasClass(infoBoxEl, 'hide') && removeClass(infoBoxEl, 'hide');
				addClass(infoBoxEl, 'show');
				hasClass(startBoxEl, 'show') && removeClass(startBoxEl, 'show');
				addClass(startBoxEl, 'hide');
				hasClass(stopBoxEl, 'show') && removeClass(stopBoxEl, 'show');
				addClass(stopBoxEl, 'hide');
				hasClass(noShakeEl, 'show') && removeClass(noShakeEl, 'show');
				addClass(noShakeEl, 'hide');
				break;
			case 3: //开始摇一摇状态
				hasClass(infoBoxEl, 'show') && removeClass(infoBoxEl, 'show');
				addClass(infoBoxEl, 'hide');
				hasClass(stopBoxEl, 'show') && removeClass(stopBoxEl, 'show');
				addClass(stopBoxEl, 'hide');
				hasClass(startBoxEl, 'hide') && removeClass(startBoxEl, 'hide');
				addClass(startBoxEl, 'show');
				hasClass(noShakeEl, 'show') && removeClass(noShakeEl, 'show');
				addClass(noShakeEl, 'hide');
				break;
			case 4: //重置摇一摇状态
				hasClass(infoBoxEl, 'show') && removeClass(infoBoxEl, 'show');
				addClass(infoBoxEl, 'hide');
				hasClass(stopBoxEl, 'hide') && removeClass(stopBoxEl, 'hide');
				addClass(stopBoxEl, 'show');
				hasClass(startBoxEl, 'show') && removeClass(startBoxEl, 'show');
				addClass(startBoxEl, 'hide');
				hasClass(noShakeEl, 'show') && removeClass(noShakeEl, 'show');
				addClass(noShakeEl, 'hide');
				break;
			default: //设备支持摇一摇，刚进来初始化状态
				hasClass(infoBoxEl, 'hide') && removeClass(infoBoxEl, 'hide');
				addClass(infoBoxEl, 'show');
				hasClass(startBoxEl, 'show') && removeClass(startBoxEl, 'show');
				addClass(startBoxEl, 'hide');
				hasClass(stopBoxEl, 'show') && removeClass(stopBoxEl, 'show');
				addClass(stopBoxEl, 'hide');
				hasClass(noShakeEl, 'show') && removeClass(noShakeEl, 'show');
				addClass(noShakeEl, 'hide');
		}

	}

	function shock(data) {

		if (navigator.vibrate) {
			navigator.vibrate(data);
		} else if (navigator.webkitVibrate) {
			navigator.webkitVibrate(data);
		}

	}

}

/**
 * 页面关闭或者刷新，要断开连接，并告知后台，是谁断开了连接
 */
window.onunload = function() {

	// socket.emit('unload-close', { curCode });
	socket.close();

}
